<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片组件 -->
      <el-card shadow="never">
        <div>
          <span class="hint"> 说明：目前支持学科和关键字条件筛选 </span>
          <el-button
            class="floatLeft"
            size="small"
            type="success"
            @click="addANewQuestion"
          >
            <i class="el-icon-edit"></i>
            新增试题</el-button
          >
        </div>
        <div class="screeningArea">
          <el-form
            :model="formInline"
            class="demo-form-inline"
            label-width="80px"
            size="small"
          >
            <!-- layout组件 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="学科">
                  <el-select
                    @change="subjectChange"
                    v-model="formInline.subjectID"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in subjectName"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6"
                ><el-form-item label="二级目录">
                  <el-select
                    v-model="formInline.catalogID"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in catalogName"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6"
                ><el-form-item label="标签">
                  <el-select v-model="formInline.tags" placeholder="请选择">
                    <el-option
                      v-for="item in tagsName"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6"
                ><el-form-item label="关键字">
                  <el-input
                    v-model="formInline.keyword"
                    placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="6">
                <el-form-item label="试题类型">
                  <el-select
                    v-model="formInline.questionType"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option label="单选" :value="1"></el-option>
                    <el-option label="多选" :value="2"></el-option>
                    <el-option label="简单" :value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6"
                ><el-form-item label="难度">
                  <el-select
                    v-model="formInline.difficulty"
                    placeholder="请选择"
                  >
                    <el-option label="简单" :value="1"></el-option>
                    <el-option label="一般" :value="2"></el-option>
                    <el-option label="困难" :value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6"
                ><el-form-item label="方向">
                  <el-select
                    v-model="formInline.direction"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in directionData"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6"
                ><el-form-item label="录入人">
                  <el-select
                    v-model="formInline.creatorID"
                    placeholder="活动区域"
                  >
                    <el-option
                      v-for="item in creatorName.role"
                      :key="item.id"
                      :label="item.value"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="6">
                <el-form-item label="题目备注">
                  <el-input
                    v-model="formInline.remarks"
                    placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6"
                ><el-form-item label="企业简称">
                  <el-input
                    v-model="formInline.shortName"
                    placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6"
                ><el-form-item label="城市">
                  <el-select
                    v-model="formInline.province"
                    placeholder="请选择"
                    style="width: 50%"
                    @change="provincesChange"
                  >
                    <el-option
                      v-for="(item, index) in provincesName"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                  <el-select
                    v-model="formInline.city"
                    placeholder="请选择"
                    style="width: 50%"
                  >
                    <el-option
                      v-for="(item, index) in citysName"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item class="flex-right">
                  <el-button @click="clearButton">清除</el-button>
                  <el-button type="primary" @click="onSubmit">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 警告组件654 -->
        <el-alert type="info" show-icon :closable="false">
          数据一共{{ numberOfLists }}条
        </el-alert>
        <el-table :data="questionList" style="width: 100%">
          <el-table-column prop="number" label="试题编号"></el-table-column>
          <el-table-column prop="subject" label="学科"></el-table-column>
          <el-table-column prop="catalog" label="目录"></el-table-column>
          <el-table-column prop="questionType" label="题型">
            <template slot-scope="scope">
              <span>{{ scope.row.questionType | questionTypeData }}</span>
            </template>
          </el-table-column>
          <el-table-column label="题干">
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column label="录入时间">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | formatTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="难度">
            <template slot-scope="scope">
              <span>{{ scope.row.difficulty | difficultyData }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人"></el-table-column>
          <el-table-column prop="address" label="操作" width="200px">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-view"
                circle
                plain
                size="small"
                @click="topicPreview(scope.row)"
              ></el-button>
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                plain
                size="small"
                @click="topicUpdate(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                size="small"
                @click="topicDelete(scope.row)"
              ></el-button>
              <el-button
                type="success"
                icon="el-icon-check"
                circle
                plain
                size="small"
                @click="choiceAdd(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页功能 -->
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :total="numberOfLists"
          :page-size="pagination.pagesize"
          :page-sizes="[2, 3, 5, 10, 20, 50]"
          :current-page="pagination.page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-card>
      <!-- 预览弹出框 -->
      <questions-dialog
        :detailId="detailId"
        v-if="dialogVisible"
        @close="handleClose"
      ></questions-dialog>
    </div>
  </div>
</template>

<script>
import { simple as subjectsSimple } from '@/api/hmmm/subjects'
import { simple as directorysSimple } from '@/api/hmmm/directorys'
import { simple as tagsSimple } from '@/api/hmmm/tags'
import { direction, questionType, difficulty } from '@/api/hmmm/constants'
import creator from '@/api/base/baseApi'
import { provinces, citys } from '@/api/hmmm/citys'
import { list, remove, choiceAdd } from '@/api/hmmm/questions'
import dayjs from 'dayjs'
import questionsDialog from './companys/questions-dialog.vue'
export default {
  name: 'BaseQuestion',
  data () {
    return {
      formInline: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null
      },
      pagination: {
        page: 1,
        pagesize: 3
      },
      numberOfLists: 0, // 数字列表
      subjectName: [], // 学科列表
      catalogName: [], // 二级目录列表
      // 获取简单目录列表
      allCatalogName: [],
      tagsName: [],
      directionData: [],
      creatorName: {},
      provincesName: [],
      citysName: [],
      questionList: [],
      // 打开关闭预览弹出框
      dialogVisible: false,
      // 打开预览弹出框穿子组件的ID
      detailId: null,
      // 预览数据列表
      previewDataList: [],
      contents: []
    }
  },
  components: {
    questionsDialog
  },
  filters: {
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD hh:mm:ss')
    },
    questionTypeData (data) {
      const str = questionType.find(
        (item) => Number(item.value) === Number(data)
      ).label
      return str
    },
    difficultyData (data) {
      const str = difficulty.find((item) => item.value === Number(data)).label
      return str
    },
    allCatalogData (data) {
      console.log(this.allCatalogName)
    }
  },
  methods: {
    // 页面条数发生改变的时候触发的事件
    handleSizeChange (val) {
      this.pagination.pagesize = val
      this.list()
    },

    // 页面发生改变时触发的事件
    handleCurrentChange (val) {
      this.pagination.page = val
      this.list()
    },

    // 获取简单学科列表
    async subjectsSimple () {
      const res = await subjectsSimple()
      this.subjectName = res.data
    },

    // 获取简单目录列表
    async directorysSimple (data) {
      const res = await directorysSimple({ subjectID: data })
      this.catalogName = res.data
    },

    // 获取全部目录
    async allDirectorysSimple () {
      const res = await directorysSimple()
      this.allCatalogName = res.data
    },

    // 获取简单标签列表
    async tagsSimple (data) {
      const res = await tagsSimple({ subjectID: data })
      this.tagsName = res.data
    },

    // 学科发生改变时触发的事件
    subjectChange () {
      this.directorysSimple(this.formInline.subjectID)
      this.tagsSimple(this.formInline.subjectID)
    },

    // 获取方向列表
    async direction () {
      const res = await direction
      this.directionData = res
    },

    // 获取录入人员
    async creator () {
      const res = await creator
      this.creatorName = res
    },

    // 获取省份
    async provinces () {
      const res = await provinces()
      this.provincesName = res
    },

    // 省份发生改变时触发的事件
    provincesChange () {
      this.citys()
    },

    // 获取城市列表
    async citys () {
      if (!this.formInline.province) return
      const res = await citys(this.formInline.province)
      this.citysName = res
    },

    // 点击触发清除事件
    clearButton () {
      this.formInline.subjectID = null
      this.formInline.difficulty = null
      this.formInline.questionType = null
      this.formInline.tags = null
      this.formInline.province = null
      this.formInline.city = null
      this.formInline.keyword = null
      this.formInline.remarks = null
      this.formInline.shortName = null
      this.formInline.direction = null
      this.formInline.creatorID = null
      this.formInline.catalogID = null
    },

    // 获取列表数据
    async list () {
      this.allDirectorysSimple()
      const res = await list({ ...this.pagination, ...this.formInline })
      this.questionList = res.data.items
      this.numberOfLists = res.data.counts
      // this.pagination.page = Number(res.data.page)
      // this.pagination.pagesize = Number(res.data.pagesize)
    },

    // 提交
    onSubmit () {
      this.list()
    },
    // 点击新增试题
    addANewQuestion () {
      this.$router.push('/questions/new')
    },
    // 点击预览按钮
    topicPreview (row) {
      this.detailId = row.id
      this.dialogVisible = true
    },
    // 点击预览弹出框关闭按钮
    handleClose () {
      this.dialogVisible = false
    },

    // 点击删除按钮
    topicDelete (row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: row.id })

          this.$message({
            type: 'success',
            message: '删除成功!'
          })

          if (this.questionList.length === 1) {
            this.pagination.page--

            if (this.pagination.page <= 1) {
              this.pagination.page = 1
            }
          }
          this.list()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 精选题库添加
    choiceAdd (row) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await choiceAdd({ id: row.id, choiceState: 1 })
          this.$message({
            type: 'success',
            message: '添加精选成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消添加精选'
          })
        })
    },

    // 题库修改
    topicUpdate (row) {
      this.$router.push(`/questions/new?id=${row.id}`)
    }
  },
  created () {
    this.subjectsSimple()
    this.direction()
    this.creator()
    this.provinces()
    this.list()
  }
}
</script>

<style scoped>
.floatLeft {
  float: right;
}
.hint {
  font-size: 12px;
  color: pink;
}
.app-container {
  padding: 10px;
}
.screeningArea {
  margin-top: 30px;
}
.formCol {
  display: flex;
}
.flex-right {
  display: flex;
  justify-content: flex-end;
}
.el-table.el-table--fit.el-table--enable-row-hover.el-table--enable-row-transition.el-table--medium {
  margin-top: 15px;
}
</style>
